<template>
  <el-dialog
    top="100px"
    width="40%"
    append-to-body
    :visible.sync="isVisible"
    :title="'鼠标点击地图选择位置'"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <el-container>
      <el-main>
        <div style="margin-top: 10px">
          <baidu-map
            class="map"
            :center="center"
            :zoom="zoom"
            :scroll-wheel-zoom="true"
            @ready="initMap"
            @click="getClickInfo"
          >
            <!-- 地图视图 -->
            <bm-view
              :style="{ width: '100%', 'min-height': '450px', flex: 1 }"
            />
            <!--缩放控件-->
            <bm-navigation
              anchor="BMAP_ANCHOR_TOP_RIGHT"
              type="BMAP_NAVIGATION_CONTROL_ZOOM"
              :offset="{ width: 8, height: 40 }"
            />

            <!--地图类型控件-->
            <bm-map-type
              :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"
              anchor="BMAP_ANCHOR_TOP_RIGHT"
            />
            <bm-marker
              :position="point"
              :icon="icon"
              :offset="{ width: 0, height: -10 }"
              :dragging="true"
              @dragend="onDragend"
            >
              <bm-label
                :content="lng + ',' + lat"
                :label-style="{
                  backgroundColor: 'rgba(40, 40, 40, 0.7)',
                  color: 'white',
                  fontSize: '13px',
                  borderRadius: '5px',
                  borderColor: '#ccc',
                  padding: '5px 10px',
                }"
                :offset="{ width: -35, height: 32 }"
              />
            </bm-marker>

            <bm-control :offset="{ width: '10px', height: '10px' }">
              <bm-auto-complete v-model="keyword" :sug-style="{ zIndex: 1 }">
                <el-input
                  v-model="keyword"
                  type="text"
                  suffix-icon="el-icon-search"
                  placeholder="请输入搜索关键字"
                  class="serachinput"
                />
              </bm-auto-complete>
            </bm-control>
            <bm-local-search :keyword="keyword" :auto-viewport="true" />
          </baidu-map>
          <div
            style="
              margin-top: 10px;
              margin-bottom: 10px;
              display: flex;
              justify-content: center;
              align-items: center;
              text-align: center;
            "
          >
            <span>位置获取结果：</span>
            <el-input v-model="location" style="width: 50%" />
          </div>
        </div>
      </el-main>
      <el-footer>
        <el-button
          size="medium"
          icon="el-icon-close"
          style="width: 120px; margin-right: 10px"
          @click="isVisible = false"
        >
          取消
        </el-button>
        <el-button
          size="medium"
          type="primary"
          icon="el-icon-check"
          style="width: 120px"
          @click="toSubmit"
        >
          确定
        </el-button>
      </el-footer>
    </el-container>
  </el-dialog>
</template>

<script>
import {
  BaiduMap,
  BmView,
  BmNavigation,
  BmMapType,
  // BmGeolocation,
  // BmControl,
  BmMarker,
  BmLabel,
  // BmInfoWindow,
  BmLocalSearch,
  // BmAutoComplete,
} from 'vue-baidu-map'

export default {
  name: 'Map',
  components: {
    BaiduMap, // 地图容器
    BmView, // 地图视图
    BmNavigation, // 缩放控件
    BmMapType, // 地图类型控件
    // BmGeolocation, // 定位控件
    // BmControl, // 自定义控件
    BmMarker, // 点
    BmLabel, // 标签
    // BmInfoWindow, // 信息窗体
    BmLocalSearch, // 地区检索
    // BmAutoComplete, // 自动填充
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    longitude: {
      type: String,
      default: '',
    },
    latitude: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      zoom: 17,
      center: { lat: 22.865702, lng: 108.286113 },
      map: null,
      point: {},
      icon: {
        url: require('@/assets/map/location1.png'),
        size: { width: 35, height: 35 },
      },
      keyword: '',
      location: '',
      lng: '',
      lat: '',
    }
  },
  computed: {
    isVisible: {
      get() {
        return this.dialogVisible
      },
      set() {
        this.toClose()
      },
    },
  },

  methods: {
    initMap({ BMap, map }) {
      this.map = map
      this.map.setMapStyle({ style: 'normal' })
      if (this.longitude != '') {
        this.lng = this.longitude
        this.lat = this.latitude
        this.point = { lng: this.lng, lat: this.lat }
        this.location = this.lng + ',' + this.lat
      }
    },
    getClickInfo(e) {
      this.point = e.point
      this.lng = e.point.lng
      this.lat = e.point.lat
      this.location = this.lng + ',' + this.lat
    },
    onDragend(event) {
      this.lng = event.point.lng
      this.lat = event.point.lat
      this.location = this.lng + ',' + this.lat
    },
    toClose() {
      this.$emit('close')
    },
    toSubmit() {
      if (this.location == '') {
        this.$message({
          message: '请选择位置',
          type: 'warning',
          duration: 3000,
        })
        return
      }
      this.$emit('save', this.location)
      this.isVisible = false
    },
  },
}
</script>
